import React from 'react'
import './style.less'
import commentHttp from "../../../../api/comment"
import banner1 from '../../../../static/images/banner1.png'
import banner2 from '../../../../static/images/banner2.png'
import banner3 from '../../../../static/images/banner3.png'
import banner4 from '../../../../static/images/banner4.png'
import banner5 from '../../../../static/images/banner5.png'
import banner6 from '../../../../static/images/banner6.png'

export default class Item extends React.Component {

    constructor(){
        super();
        this.state = {
            commentState:0,
            img:[banner1,banner2,banner3,banner4,banner5,banner6],
        }
        this.commentText = React.createRef();
    }

    // componentDidMount(){
    //     this.setState({
    //         commentState:this.props.data.commentState
    //     })
    // }

    // commentHandler() {
    //     this.setState({
    //         commentState:1
    //     })
    // }

    // submitCommentHandler(){
    //     this.setState({
    //         commentState:2
    //     })
    //     // 发送网络请求
    //     api.orderComment.orderCommentData({
    //         info:this.commentText.current.value
    //     })
    //     .then(res => res.json())
    //     .then(data => {
    //         alert(data.msg);
    //     })
    // }

    // hideComment(){
    //     this.setState({
    //         commentState:0
    //     })
    // }
    recommentHandler = () => {
        this.setState({
            commentState:1
        })
    }
    cancelComment = () => {
        this.setState({
            commentState:0
        })
    }
    submitHandler = ()=>{
        this.setState({
            commentState:2
        })
        /**
         * 网略请求，调用增加评论接口
         */
        commentHttp.addCommentData({
            info:this.commentText.current.value
        })
    }
    render() {
        const data = this.props.data;
        return (
            <div className="clear-fix order-item-container">
                <div className="order-item-img float-left">
                    <img src={this.state.img[this.props.index]} />
                </div>
                <div className="order-item-comment float-right">
                    {
                        this.state.commentState === 0 ?  <button className="btn" onClick={this.recommentHandler}>评价</button> :  this.state.commentState === 1 ? <button className="btn">评价中</button>:<button className="btn unseleted-btn">已评价</button>
                    }
               
                </div>
                <div className="order-item-content">
                    <span>商户：{data.title}</span>
                    <span>类型：{data.houseType}</span>
                    <span>价格：￥{data.price}</span>
                </div>
                {
                    this.state.commentState === 1 ?
                    <div className="comment-text-container">
                    <textarea style={{ width: '100%', height: '80px' }} className="comment-text" ref={ this.commentText }></textarea>
                    <button className="btn" onClick={this.submitHandler}>提交</button>
                    &nbsp;
                            <button className="btn unseleted-btn" onClick={this.cancelComment}>取消</button>
                    </div>
                    :  ""
                }
            </div>
        )
    }
}
